<%--
  Created by IntelliJ IDEA.
  User: John
  Date: 2019/10/29
  Time: 16:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>通用权限管理系统</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<jsp:include page="common/header.jsp" />

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <jsp:include page="common/menu.jsp" />
        </div>
    </div>

    <div class="layui-body">

        <div id="role_permission_container"></div>

        <div>
            <button onclick="getTreeChecked()">获取选中的节点</button>
        </div>

        <script>
            var data = ${permissionTree};
            /*var data = [
                {
                    "checked":false,
                    "children":[
                        {
                            "checked":false,
                            "children":[

                            ],
                            "id":2,
                            "spread":true,
                            "title":"用户管理"
                        },
                        {
                            "checked":false,
                            "children":[

                            ],
                            "id":3,
                            "spread":true,
                            "title":"角色管理"
                        },
                        {
                            "checked":false,
                            "children":[

                            ],
                            "id":4,
                            "spread":true,
                            "title":"菜单管理"
                        }
                    ],
                    "id":1,
                    "spread":true,
                    "title":"账号管理"
                },
                {
                    "checked":false,
                    "children":[
                        {
                            "checked":false,
                            "children":[

                            ],
                            "id":6,
                            "spread":true,
                            "title":"商品查询"
                        },
                        {
                            "checked":true,
                            "children":[

                            ],
                            "id":7,
                            "spread":true,
                            "title":"商品添加"
                        },
                        {
                            "checked":true,
                            "children":[

                            ],
                            "id":8,
                            "spread":true,
                            "title":"库存管理"
                        }
                    ],
                    "id":5,
                    "spread":true,
                    "title":"商品管理"
                }
            ];*/


            layui.use('tree', function(){
                var tree = layui.tree;

                //渲染
                var inst1 = tree.render({
                    elem: '#role_permission_container'  //绑定元素
                    ,showCheckbox:true
                    ,data: data
                    ,id: 'permissionTree'
                });
            });
        </script>

        <script type="text/javascript">
            function getTreeChecked() {
                layui.use('tree', function(){
                    var tree = layui.tree;
                    var checkData = tree.getChecked('permissionTree');
                    console.log(checkData);
                });
            }
        </script>
    </div>

<jsp:include page="common/footer.jsp" />
